<template>
	<view class="myOrderBox">
	
	
		<!-- <view class="cardBox" v-for="(item,index) in orderList" :key="index" @click="toMain(item)"> -->
            <view class="artItem plr14    mb18  " v-for="(i,n) in orderList" :key="n" @click="toMain(i)">
               <view class="justify-between align-center">
               	<image :src="$domain.api+i.img_url" mode=""></image>
               	<view class="flex-col justify-between  flex1">
               	    <text class="name clamp2">{{i.title}}</text>
               	    <text class="">下单时间：{{i.create_time}}</text>
               	</view>
               </view>
				<view class="mt15">
					活动时间：{{}}
				</view>
				<view class="mt5">
					活动地点：{{}}
				</view>
				<view class="align-center justify-between mt10">
					<text  class="status" :style="i.is_paid==1?'':'color:#0368FF'">{{i.pay_status}}</text>
					<view class="flex1 mr20" style="text-align: right;" >
						支付金额: <text style="color: #FA5151;font-size: 36rpx;font-weight: 600;" >￥{{i.pay_fee}}</text>
					</view>
					<view v-if="i.is_paid!=1" class="gopay"  style="background-color: #0368FF;">
						去支付
					</view>
					<view v-else class="gopay" >
						已完成
					</view>
				</view>
            </view>
		<!-- </view> -->
        <view class="" v-if="orderList.length==0">
            <uv-empty mode="data" icon="https://cdn.uviewui.com/uview/empty/data.png"></uv-empty>
        </view>
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleFlag: 0,
                orderList:[],
                allCarData:[],
                orderItem:{},
                imgList:[],
				user_id:uni.getStorageSync('userId')

			};
		},
		onLoad() {

		},
		onShow() {
			if (!uni.getStorageSync('userId')) {
				uni.reLaunch({
					url: '/pages/login/login'
				})
				return
			}
			this.getOrder()
		},
		methods: {
            formateTime(data){
              return this.$utils.formatDateTime(data)  
            },
			//立即支付
			payBtn(){
				uni.navigateTo({
					url:'/pages/mine/payment'
				})
			},
			//更多照片
			
			//验证车弹窗关闭
			carImgClose(){
				this.$refs.checkCar.close();
			},
			async getOrder() {
				let data = await this.$api.orderlist({
					userId: this.user_id
				})
				
                this.orderList = data.data
			},

			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			//待支付按钮
			unpaidBtn(type) {
				this.titleFlag = type
				this.getOrder()
			},

			//合同按钮
			contractBtn() {
				this.$refs.dzContract.open();
			},
			//合同弹窗关闭
			contractClose() {
				this.$refs.dzContract.close();
			},
			//全部车辆弹窗
			allCarBtn(data) {
                this.orderItem = data
                this.allCarData =JSON.parse(data.car_arr)
				this.$refs.carModal.open();
			},
			//车辆弹窗关闭
			carClose() {
				this.$refs.carModal.close();
			},
            async  showAllImg(item){
                const {data}  =   await  this.$api.cartImage({order_id:item.id})
                console.log(data)
                this.imgList = data.list
                this.$refs.checkCar.open();
            },
            async getImglist(id){
                const {data}  =   await  this.$api.cartImage({order_id:id})
                
                return data.list
            },
            toMain(item){
				if(item.is_used==1) return
                    uni.navigateTo({
                        url:'/pages/voteBox/index?orderno='+item.orderno
                    })
            },
            submitpz(id){
                    uni.navigateTo({
                        url:'/pages/pay/index?id='+id
                    })
            }
		}
	}
</script>

<style lang="scss" scoped>
	.myOrderBox {
		
		position: relative;
		

		.orderTitle {
			width: 750rpx;
			height: 98rpx;
			// background-color: #FFFFFF;
			display: flex;
			font-size: 26rpx;
			color: #666666;
            border-bottom: 2rpx solid  rgba(151,151,151,0.062);
			.titleItem {
				height: 98rpx;
				line-height: 98rpx;
				text-align: center;
				flex-basis: 0rpx;
				flex-grow: 1;
				font-weight: 600;
			}

			.active {
				height: 98rpx;
				line-height: 98rpx;
				text-align: center;
				flex-basis: 0rpx;
				flex-grow: 1;
				color: #000000;
				position: relative;
				font-weight: 600;
			}

			.active::after {
				position: absolute;
				content: "";
				width: 74rpx;
				height: 4rpx;
				bottom: 0rpx;
				left: 50%;
				transform: translateX(-50%);
				background: #2CC6A1;
			}
		}

	}	
    .submitPz{
        width: 165rpx;
        height: 54rpx;
        background: #434343;
        border-radius: 6rpx;
        font-size: 24rpx;
        color: #FFFFFF;
        text-align: center;
        line-height: 54rpx;
    }
    .artItem {
        
	padding-bottom: 40rpx;
     font-size: 28rpx;
     color: #666666;
        margin-top: 32rpx;
		border-bottom: 2rpx solid #D8D8D8;
        image{
          width: 240rpx;
          height: 180rpx;
            
            margin-right: 30rpx;
        }
        .right{
            width: 120rpx;
            height: 54rpx;
            background: rgba(0,199,119,0.2);
            border-radius: 60rpx ;
            font-size: 28rpx;
            color: #2CC6A1;
            text-align: center;
            line-height: 54rpx;
        }
        .name{
            font-size: 32rpx;
            color: #3D3D3D;
        }
		.status{
			color: rgba(0,0,0,0.85);
		}
		.gopay{
			width: 120rpx;
			height: 64rpx;
			background: #18B73D;
			border-radius: 120rpx;
			text-align: center;
			line-height: 64rpx;
			color: #FFFFFF;
		}
    }
</style>